<template>
  <div class="swiper-container">
    <swiper :options="swiperOptions" ref="mySwiper">
      <swiper-slide v-for="(img, index) in images" :key="index">
        <img :src="img" alt="Banner" style="width: 100%; height: auto;" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'SwiperComponent',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      images: [
        require('@/assets/banner1.jpg'),
        require('@/assets/banner2.jpg'),
        require('@/assets/banner3.jpg')
      ],
      swiperOptions: {
        autoplay: true,
        loop: true
      }
    }
  }
}
</script>